<template>
  <div >
    <topf :is_manager="is_manager" />
      <div class="bigBox">
        <div class="topMessage">
        <div class="_img">
        <img src="../../../static/user_images/OIP-C.jpg" alt="">
        </div>
        <div class="textMessage">
          <div class="name">{{user.user_name}}</div>
          <div class="hobby">爱好：{{user.user_hobby}}</div>
        </div>
      </div>
      <div class="bottomMessage">
        <div class="leftMessage">
          <el-container>
          <el-header>
              <div>
                <el-menu 
                :default-active="activeIndex" 
                class="el-menu-demo" 
                mode="horizontal" 
                background-color="#545c64"
                active-text-color="#ffd04b"
                @select="handleSelect">
                <el-menu-item index="following">关注</el-menu-item>
                <el-menu-item index="fan">粉丝</el-menu-item>
                <el-menu-item index="theme" >主题帖</el-menu-item>
                <el-menu-item index="reply" >回复帖</el-menu-item>
                <el-menu-item index="collection">收藏</el-menu-item>
              </el-menu>
              </div>
          </el-header>
          <el-main>
            <div class="following" v-if="activeIndex == 'following'">
              <div class="bigBoxFollowing" v-for="(item,i) in following">
                <user-message :user="item" />
              </div>
            </div>
            <div class="fan" v-else-if="activeIndex == 'fan'">
              <div class="bigBoxFan" v-for="(item,i ) in fan">
              <user-message :user="item"  />
            </div>
            </div>
            <div class="reply" v-else-if="activeIndex == 'reply'">
                <div class="bigBoxReply">
                  <div class="reply">
                    <div class="containItem" v-for="(item, i) in reply" >
                      <div class="userMessage">
                        <div class="headImg">
                          <img src="../../assets/images/OIP-C.jpg" alt="">
                        </div>
                        <div class="userName">{{item.person.user_name}}</div>
                        <div class="time">{{item.reply_post.reply_post_createTime}}</div>
                      </div>
                      <div class="contain" @click="topost(item.reply_post.theme_post_id)">
                        <div class="replyContain">{{item.person.user_name}}:{{item.reply_post.reply_post_content}}</div>
                        <div class="themeTitle">主题ID:{{item.reply_post.theme_post_id}}</div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div class="theme" v-else-if="activeIndex == 'theme'">
                <div class="bigBoxThemw">
                <div class="theme-item" v-for="(item, i) in theme">
                  <div class="title" @click="toThemeCenter(i)">
                    {{item.theme_post.theme_post_title}}
                  </div>
                </div>
              </div>
            </div>
            <div class="collection" v-else>
              <div class="bigBoxCollection" v-for="(item , i) in collection ">
                <div class="title" @click="toThemeCenter(i)" >
                  {{item.theme_post.theme_post_title}}
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
          
        </div>
        <div class="rightMessage">
          <div class="_button">
            <div v-if="is_manager == 1">
              <el-button @click="lockPerson">锁定</el-button>
            </div>
            <div  v-if="user.user_id != user_id " >
              <el-button @click="follow">关注</el-button>
            </div>
          </div>
          <div style="font-size:30px;margin-bottom:10px">个人资料</div>
          <el-form label-position="right" label-width="80px" :model="formLabelAlign" :rules="message_form">
            <el-form-item label="用户名">
              <el-input v-model="formLabelAlign.user_name" :disabled = "user_id != user.user_id"></el-input>
            </el-form-item>
            <el-form-item label="密码" >
              <el-input v-model="formLabelAlign.user_password" :disabled = "user_id != user.user_id"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="formLabelAlign.user_sex" :disabled = "user_id != user.user_id"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="formLabelAlign.user_age" :disabled = "user_id != user.user_id"></el-input>
            </el-form-item>
            <el-form-item label="职业">
              <el-input v-model="formLabelAlign.user_pro" :disabled = "user_id != user.user_id"></el-input>
            </el-form-item>
            <el-form-item label="爱好">
              <el-input v-model="formLabelAlign.user_hobby" :disabled = "user_id != user.user_id"></el-input>
            </el-form-item>
        </el-form>
        <div v-if="user_id == user.user_id">
           <el-button @click="submitForm"  >提交修改</el-button>
        </div>
        </div>
      </div>
    </div>
  
  </div>
</template>

<script>
import Topf from '../../components/forumHome/Topf.vue';
import userMessage from '../../components/global/userMessage.vue'
import {searchFllowingByUserId} from '../../api'
import {searchFanByUserId} from '../../api'
import {searchCollectionByUserId} from '../../api'
import {searchThemeByUserId} from '../../api'
import {searchReplyByUserId} from '../../api'
import {updateUserMsg} from '../../api'
import {getPersonbyId} from '../../api'
import {followPerson} from '../../api'
import {lockPerson} from '../../api'
export default {
  components: { userMessage, Topf },
  data () {
    return {
      activeIndex: 'following',
      formLabelAlign: {
          user_name: '',
          user_sex: '',
          user_age: '',
          user_pro:'',
          user_hobby:'',
          user_password:''
        },
        message_form: {
        user_name: [
          { required: false, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在3到10个字符之间', trigger: 'blur' }
        ],
        user_password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6到16个字符之间', trigger: 'blur' }
        ]
      },
        user:{},
        following:[],
        reply:[],
        collection:[],
        reply:[],
        theme:[],
        user_id:0,
        is_manager:0
    }
  },
 async created () {
    let id = this.$route.params.id
    let that = this
    this.user_id = JSON.parse(window.localStorage.getItem('user' )).user_id
    this.is_manager = JSON.parse(window.localStorage.getItem('user' )).is_manager
    console.log("id",id);
    
    if(id == undefined){
     this.user = JSON.parse(window.localStorage.getItem('user' ))
    }else{
     await getPersonbyId(id)
        .then(res => {
         that.user  = res.data.data;
         console.log("??????",res.data.data);
        })
        .catch(() => {});
    }
    this.formLabelAlign.user_name = this.user.user_name
    this.formLabelAlign.user_sex = this.user.user_sex
    this.formLabelAlign.user_age = this.user.user_age
    this.formLabelAlign.user_pro = this.user.user_pro
    this.formLabelAlign.user_hobby = this.user.user_hobby
    this.formLabelAlign.user_password = this.user.user_password
    let temp = this.user.user_id
    searchFllowingByUserId(temp)
        .then(res => {
          console.log("1",res.data.data);
         that.following  = res.data.data;
        })
        .catch(() => {});
    searchFanByUserId(temp)
        .then(res => {
          console.log("2",res.data.data);
         that.fan  = res.data.data;
        })
        .catch(() => {});
    searchCollectionByUserId(temp)
    .then(res => {
      console.log("3",res.data.data);
      that.collection  = res.data.data;
    })
    .catch(() => {});
    searchThemeByUserId(temp)
    .then(res => {
      console.log("4",res.data.data);
      that.theme  = res.data.data;
    })
    .catch(() => {});
    searchReplyByUserId(temp)
        .then(res => {
          console.log("5",res.data.data);
         that.reply  = res.data.data;
        })
        .catch(() => {});
  },
  methods: {
    handleSelect(key, keyPath) {
        this.activeIndex = key
        console.log(this.activeIndex);
      },
      toThemeCenter(idx){
        let data = []
        if(this.activeIndex == 'collection'){
          data = this.collection
        }else{
          data = this.theme
        }
        let temp = data[idx].theme_post_id
        this.$router.push({
          path: `/post/${temp}`,
        })
      },
      lockPerson(){
        let temp = this.user.user_id
        lockPerson(temp)
        .then(res => {
          console.log(res.data);
          alert(res.data.message)
        })
        .catch(() => {});
      },
      follow(){
        let temp = this.user.user_id
        let temp2 = this.user_id
        followPerson(temp2,temp)
        .then(res => {
          console.log(res.data);
          alert(res.data.message)
        })
        .catch(() => {});
      },
      submitForm() {
        console.log(this.formLabelAlign)
            let user_id = this.user.user_id

            let user_name=this.formLabelAlign.user_name
            let user_sex=this.formLabelAlign.user_sex 
            let user_age=this.formLabelAlign.user_age 
            let user_pro=this.formLabelAlign.user_pro 
            let user_hobby=this.formLabelAlign.user_hobby 
            let user_password=this.formLabelAlign.user_password

            this.user.user_name = this.formLabelAlign.user_name
            this.user.user_sex = this.formLabelAlign.user_sex
            this.user.user_age = this.formLabelAlign.user_age
            this.user.user_pro = this.formLabelAlign.user_pro
            this.user.user_hobby = this.formLabelAlign.user_hobby
            this.user.user_password = this.formLabelAlign.user_password

            let that = this
            updateUserMsg(
              user_id,
              user_name,
              user_password,
              user_sex,
              user_age,
              user_pro,
              user_hobby
            ).then(res => {
              console.log(res.data);
              let data = that.user
              this.$store.dispatch("aLogin", {
              user: data,
              message: "",
              success: () => {
                alert("修改成功")
              }
            });
            });

      },
      topost(idx){
        this.$router.push({
          path: `/post/${idx}`,
        })
      }
  },
  
}
</script>

<style lang="less" scoped>
.bigBox{
  display: flex;
  width: 80%;
  flex-direction: column;
  background-color: rgb(218, 216, 216);
  margin:0 auto;
  .topMessage{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    ._img{
      width: 150px;
      height: 150px;
      margin:0 auto;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .textMessage{
      div{
        text-align: center;
        margin:10px auto;
      }
    }
  }
  .bottomMessage{
    display: flex;
    flex-direction: row;
    border-radius: 10px;
    .el-menu{
      /deep/.el-menu-item{
        width:150px;
        font-size: 30px;
      }
    }
  }
  .leftMessage{
    .bigBoxCollection{
      width: 100%;
      padding: 10px;
      font-size: 30px;

      .title{
        text-align: left;
        border-bottom: 1px solid black;
        padding: 10px;
      }
    }
    .bigBoxReply{
      width: 100%;
      height: 100%;
      .reply{
        .containItem{
          display: flex;
          flex-direction: column;
          background-color: #fff;
          border-bottom: 1px solid black;
          .userMessage{
            display: flex;
            flex-direction: row;
            .headImg{
              width: 30px;
              height: 30px;
              border-radius: 50%;
              // background-color: #000;
              img{
                 border-radius: 50%;
              }
            }
            div{
              margin: 10px;
              text-align: left;
            }
          }
          .contain{
            div{
              margin:0 20px;
              text-align: left;
            }
            .replyContain{
              font-family: 800;
              font-size: 30px;
              background-color: rgb(231, 230, 230);
            }
          }
        }
      }
    }
    .bigBoxThemw{
      width: 100%;
      padding: 10px;
      font-size: 30px;

      .title{
        text-align: left;
        border-bottom: 1px solid black;
        padding: 10px;
      }
    }

  }
  .rightMessage{
    background-color: #fff;
    margin-top: 100px;
    margin-left: 30px;
    padding: 10px;
    height: 550px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    ._button{
      display: flex;
      flex-direction: row;
      div{
        margin: 10px;
      }
    }
  }

}
</style>